<template>
	<nt-container bg-color="#F2F4F6">
		<view class="nt-order-detail">
			<nt-grid :data="entryList" @click='toPage'></nt-grid>
			<nt-card label="基本信息">
				<view class="nt-order-detail__item">
					<nt-card-item before-icon="/static/image/time.png" label="预约时间" :desc="orderInfo.appointment" @tap="nav(`/subpackage/order/pages/reservation/index?id=${orderId}`)">
						<template #after>
							<view class="nt-order-detail__item--iconwrap">
								<image 
									class="nt-order-detail__item--icon" 
									src="/static/image/editor.png" 
									@tap="nav(`/subpackage/order/pages/reservation/index?id=${orderId}`)"
								></image>
							</view>
						</template>
					</nt-card-item>
					<nt-card-item label="派单时间" :desc="orderInfo.reception_time"></nt-card-item>
				</view>
				
				<view class="nt-order-detail__item">
					<nt-card-item before-icon="/static/image/order-type.png" label="订单类型" :desc="orderInfo.mtype"></nt-card-item>
				</view>
				
				<view class="nt-order-detail__item">
					<nt-card-item before-icon="/static/image/custom-type.png" label="客户类型">
						<template #default>
							<view class="nt-order-detail__item--tag">
								<nt-tag :text="orderInfo.utype" bgColor="var(--theme-color)" color="#fff"></nt-tag>
								<nt-tag :text="orderInfo.ctype" bgColor="var(--theme-color)" color="#fff"></nt-tag>
							</view>
						</template>
					</nt-card-item>
				</view>
				
				<view class="nt-order-detail__item">
					<nt-card-item before-icon="/static/image/detail-location.png" label="详细地址" :desc="orderInfo.address">
						<template #after>
							<view class="nt-order-detail__item--iconwrap">
								<image class="nt-order-detail__item--icon" src="/static/image/localtion.png"></image>
								<image class="nt-order-detail__item--icon" src="/static/image/editor.png"></image>
							</view>
						</template>
					</nt-card-item>
				</view>
				<view class="nt-order-detail__item">
					<nt-card-item before-icon="/static/image/order-type.png" label="故障描述" :desc="orderInfo.remarks">
						<template #after>
							<view class="nt-order-detail__item--iconwrap">
								<image class="nt-order-detail__item--icon" src="/static/image/tel.png"></image>
							</view>
						</template>
					</nt-card-item>
				</view>
				
				<!-- <view class="nt-order-detail__item">
					<nt-card-item before-icon="/static/image/custom-type.png" label="师傅备注" desc="--">
						<template #after>
							<view class="nt-order-detail__item--iconwrap">
								<image class="nt-order-detail__item--icon" src="/static/image/editor.png"></image>
							</view>
						</template>
					</nt-card-item>
				</view> -->
			</nt-card>
			
			<nt-card label="下单/返利信息" v-if="orderInfo.orderbefore || orderInfo.rebate_type>0 || orderInfo.rebate_type2>0">
				<view class="h_cardBox" v-if="orderInfo.orderbefore">
					<view class="h_box">
						<view class="h_t1">下单ID：</view>
						<view class="h_t2">{{orderInfo.orderbefore.id}}</view>
					</view>
					<view class="h_box">
						<view class="h_t1">下单时间：</view>
						<view class="h_t2">{{orderInfo.orderbefore.create_date.slice(0,11)}}</view>
					</view>
					<view class="h_box">
						<view class="h_t1">下单用户：</view>
						<view class="h_t2">{{orderInfo.orderbefore.username}}</view>
					</view>
					<view class="h_box">
						<view class="h_t1">微信名称：</view>
						<view class="h_t2">{{orderInfo.orderbefore.useropenname}}</view>
					</view>
					<view class="h_box">
						<view class="h_t1">微信绑定师傅：</view>
						<view class="h_t2">{{orderInfo.orderbefore.bind_wrokername}}</view>
					</view>
					<view class="h_box">
						<view class="h_t1">绑定时间：</view>
						<view class="h_t2">{{orderInfo.orderbefore.bind_time}}</view>
					</view>
				</view>
				<view class="h_cardBox" v-if="orderInfo.rebate_type>0">
					<view class="h_box">
						<view class="h_t1">返利类型：</view>
						<view class="h_t2">{{orderInfo.rebate_type1_text}}</view>
					</view>
					<view class="h_box">
						<view class="h_t1">返利状态：</view>
						<view class="h_t2">{{orderInfo.rebate_status1_text}}</view>
					</view>
					<view class="h_box">
						<view class="h_t1">返利用户：</view>
						<view class="h_t2">{{orderInfo.rebate_username1}}</view>
					</view>
					<view class="h_box">
						<view class="h_t1">返利金额：</view>
						<view class="h_t2">{{orderInfo.rebate_price1_text}}</view>
					</view>
				</view>
				<view class="h_cardBox" v-if="orderInfo.rebate_type2>0">
					<view class="h_box">
						<view class="h_t1">返利类型：</view>
						<view class="h_t2">{{orderInfo.rebate_type2_text}}</view>
					</view>
					<view class="h_box">
						<view class="h_t1">返利状态：</view>
						<view class="h_t2">{{orderInfo.rebate_status2_text}}</view>
					</view>
					<view class="h_box">
						<view class="h_t1">返利用户：</view>
						<view class="h_t2">{{orderInfo.rebate_username2}}</view>
					</view>
					<view class="h_box">
						<view class="h_t1">返利金额：</view>
						<view class="h_t2">{{orderInfo.rebate_price2_text}}</view>
					</view>
				</view>
			</nt-card>
			<!-- <view class="nt-order-detail__footer">
				<nt-button text="上门" color="var(--theme-color)" @click="nav(`/subpackage/order/pages/scan-code/index?id=${orderId}&qrCode=${orderInfo.present_images}`)"></nt-button>
			</view> -->
		</view>
		<nt-order-more :show="showMore"  @close="showMore = $event" :auth="orderInfo.powerStatus" :id="orderInfo.id" :is_submit="orderInfo.is_submit"></nt-order-more>
	</nt-container>
</template>

<script>
import { getOrderDetail } from "@/api"
import { nav } from "@/utils"
export default {
	data() {
		return {
			orderInfo: {},
			entryList: [],
			orderId: '',
			showMore: false,
		}
	},
	onLoad(options){
		this.orderId = options.id || ''
	},
	onShow(){
		this.getMemberOrderDetail()
	},
	methods: {
		toPage(index){
			const data = this.entryList[index]
			if(!data.url && data.type === 'more'){
				this.showMore = true
				return;
			}
			this.nav(`${data.url}?id=${this.orderId}`)
		},
		// 获取订单详情
		getMemberOrderDetail() {
			getOrderDetail(this.orderId).then(res => {
				console.log(res,'订单详情')
				const { code, data } = res
				this.orderInfo = data;
				
				this.entryList = [
					{ label: "验券", icon: "/static/image/yanquan.png", url: '/subpackage/order/pages/check-ticket/index', visiable: data.powerStatus.postPayment === 1  },
					{ label: "支付提交", icon: "/static/image/yanquan.png", url: '/subpackage/order/pages/payment/index', visiable: data.powerStatus.postPayment === 1 },
					{ label: "历史记录", icon: "/static/image/history.png", url: '/subpackage/order/pages/history/index', visiable: true },
					{ label: "更多功能", icon: "/static/image/more.png", url: "", type: "more", visiable: true }
				]
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.h_cardBox{
		display: flex;
		flex-wrap: wrap;
		padding-top: 20rpx;
		margin-bottom: 17rpx;
		border-top: 1px solid #DDDDDD;
		&:first-child{border: none;}
		&:last-child{margin-bottom: 0;}
		.h_box{
			width: 50%;
			display: flex;
			font-size: 26rpx;
			line-height: 46rpx;
			color: #666;
			.h_t2{color: #f00;}
		}
	}
.nt-order-detail{
	padding-bottom: 130rpx;
	/deep/ .nt-card{
		margin: 20rpx;
		&-item{
			min-height: 90rpx;
			height:auto;
			&__desc{
				max-width: 70%;
			}
		}
	}
	&__item{
		margin-top: 30rpx;
		&--iconwrap{
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			display:flex;
			align-items: center;
			justify-content: flex-end;
		}
		&--icon{
			width: 50rpx;
			height: 50rpx;
			margin-left: 30rpx
		}
		&--tag{
			display:flex;
			align-items: center;
			margin-top: 20rpx;
			/deep/.nt-tag{
				margin-right: 10rpx;
			}
		}
	}
	/deep/.nt-card-item{
		margin-bottom: 20rpx;
	}
	
	&__remarkswarp{
		padding: 25rpx 20rpx;
		background:#fff;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}
	&__remarks{
		border-radius: 20rpx;
		border: 1rpx solid #F8D4B9;
		padding: 30rpx;
		box-sizing: border-box;
		display:flex;
		
		&--label{
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			white-space: nowrap;
			margin-right: 10rpx;
		}
		&--textarea{
			heigh: 160rpx;
			width: 100%;
		}
	}
	&__footer{
		position: fixed;
		bottom: 0;
		left:0;
		width: 100%;
		padding: 0 65rpx;
		box-sizing: border-box;
	}
}
</style>